<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>修改手机号</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../../../css/mui.min.css">
    <style>
        .mui-input-row:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0px;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #efefef;
        }
        ::-webkit-input-placeholder{color: #c0c0c0}
        .oldCodeColer{color:#2e97f5 }
        .oldCodeBtnColer{color:#c0c0c0 }
    </style>
    <script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../../../js/layer.js"></script>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">修改手机号</h1>
    </header>
    <div class="mui-content">
        <div  class="mui-control-content mui-active">
            <div class="mui-input-row h50 pr">
                <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
                <label class="pl40">原手机号</label>
                <span style="line-height: 2.5rem;padding-left: 2rem"  class="mui-input-clear">13839387779</span>
            </div>
        </div>
        <div  class="mui-control-content mui-active">
            <div class="mui-input-row h50 pr">
                <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
                <label class="pl40">验证码</label>
                <input style="width: 35%;float: left;margin-left: 3rem" type="text" class="mui-input-clear" placeholder="请输入验证码">
                <span class="mui-pull-left" style="line-height: 2.5rem">|</span>
                <span class="mui-pull-left oldCodeBtn oldCodeColer" style="line-height: 2.5rem;margin-left: 1rem">获取验证码</span>
            </div>
        </div>
        <div  class="mui-control-content mui-active">
            <div class="mui-input-row h50 pr">
                <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
                <label class="pl40">新手机号</label>
                <input class="newPhone" maxlength="11" type="text" class="mui-input-clear" placeholder="请输入手机号">
            </div>
        </div>
        <div  class="mui-control-content mui-active">
            <div class="mui-input-row h50 pr">
                <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
                <label class="pl40">验证码</label>
                <input style="width: 35%;float: left;margin-left: 3rem"  type="text" class="mui-input-clear" placeholder="请输入验证码">
                <span class="mui-pull-left" style="line-height: 2.5rem">|</span>
                <span class="mui-pull-left newCodeBtn oldCodeColer" style="line-height: 2.5rem;margin-left: 1rem">获取验证码</span>
            </div>
        </div>

        <button style="width: 80%;height: 3rem;background: #ffbf33;line-height: 2rem;color: #ffffff;border-radius: 1.5rem;margin: 2rem 10%;border: none">确认修改</button>
    </div>

</body>
<script src="../../../js/mui.min.js"></script>
<script>
$(function(){
//    layer.msg('hello');
    var code1,code2     //定义定时器的变量
    var oldNum = 3;   //倒计时的数字
    var oldcode;    //老验证码的定时器
    var newNum = 3;   //倒计时的数字
    var newcode;    //老验证码的定时器
        $(".oldCodeBtn").click(function () {
            $(this).html("已发送(" + oldNum + ")");
            $(this).addClass("oldCodeBtnColer");
            clearInterval(code1);
            code1 = setInterval(function(){
                oldNum--;
                $(".oldCodeBtn").html("已发送(" + oldNum + ")");
                if( oldNum == 0){
                    clearInterval(code1);
                    $(".oldCodeBtn").html("重新获取");
                    oldNum = 3;
                }
            },1000);
        });
        $(".newCodeBtn").click(function () {
            if($(".newPhone").val() == ""){
                alert("请输入正确的手机号！")
            }else{
                $(this).html("已发送(" + newNum + ")");
                $(this).addClass("oldCodeBtnColer");
                clearInterval(code2);
                code2 = setInterval(function(){
                    newNum--;
                    $(".newCodeBtn").html("已发送(" + newNum + ")");
                    if( newNum == 0){
                        clearInterval(code2);
                        $(".newCodeBtn").html("重新获取");
                        newNum = 3;
                    }
                },1000);
            }
        });

})
</script>
</html>